<template>
  <div class="LoginCompBox transition-box">
    <div
      class="Box"
      :class="{
        dark: theme.state.themeState == 'drak',
        lightDark: theme.state.themeState == 'light',
      }"
    >
      <div class="title">
        <span>登录</span>
        <span class="iconfont icon-close rigth" @click="closeDom"></span>
      </div>
      <div class="content">
        <div class="codeImg" v-if="activeIndex == 0">
          <div class="QrCode">
            <img
              src="https://www.lv666.top/IMG/1646542718235_BSheader.png"
              alt="二维码加载失败"
              title="扫码"
            />
          </div>
          <span>打开小程序"CMBlog"扫描此二维码登录</span>
        </div>
        <div class="code" v-else-if="activeIndex == 1">
          <LoginCodeComp></LoginCodeComp>
        </div>
        <div class="password" v-else>
          <LoginPassWordComp></LoginPassWordComp>
        </div>
      </div>
      <div class="footer">
        <span
          v-for="(item, index) in renderBtnDataArr"
          :key="item.id"
          @click="avtiveFn(index)"
          :class="{ active: item.isActive }"
          >{{ item.text }}</span
        >
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { useStore } from "vuex";
import LoginCodeComp from "./LoginCodeComp/LoginCodeComp.vue";
import LoginPassWordComp from "./LoginPassWordComp/LoginPassWordComp.vue";
@Options({
  components: {
    LoginCodeComp,
    LoginPassWordComp,
  },
})
export default class LoginComp extends Vue {
  theme: any = useStore();

  /**
   * *********************切换面板功能区************************：
   */

  // 当前激活方式
  activeIndex: number = 0;
  //按钮区
  renderBtnDataArr: Array<Object> = [
    {
      id: 0,
      text: "扫码登陆",
      isActive: true,
    },
    {
      id: 1,
      text: "验证码登录",
      isActive: false,
    },
    {
      id: 2,
      text: "密码登录",
      isActive: false,
    },
  ];
  //调用父级函数
  closeDom() {
    this.$emit("loginClose", 0);
  }
  //激活函数
  avtiveFn(index: number) {
    // this.renderDataArr[index].isActive = true;
    let newArr: any = this.renderBtnDataArr;
    newArr.forEach((ele: any, i: number) => {
      if (i == index) {
        ele.isActive = true;
        this.activeIndex = index;
      } else {
        ele.isActive = false;
      }
      this.renderBtnDataArr = newArr;
    });
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@import url("../../assets/less/global.less");
@import url("./index.less");
</style>